import { getCssVar } from '@/utils/theme'

/**
 * 创建与主题相关的自定义指令
 * @returns {Object} 包含主题指令的对象
 */
export function createThemeDirectives() {
  return {
    /**
     * 根据当前主题设置按钮样式的自定义指令
     */
    themeButton: {
      mounted(el, binding) {
        // 获取当前主题的主色
        const primaryColor = getCssVar('--primary-color')
        
        // 提取RGB值用于透明度计算
        const primaryColorRgb = getCssVar('--primary-color-rgb').split(',')
        
        // 设置默认样式
        if (!binding.value || binding.value === 'primary') {
          // 主题按钮样式
          el.style.backgroundColor = primaryColor
          el.style.borderColor = primaryColor
          el.style.color = '#ffffff'
          
          // 鼠标悬停样式
          el.addEventListener('mouseenter', () => {
            el.style.backgroundColor = `rgba(${primaryColorRgb}, 0.8)`
            el.style.borderColor = `rgba(${primaryColorRgb}, 0.8)`
          })
          
          // 鼠标离开样式
          el.addEventListener('mouseleave', () => {
            el.style.backgroundColor = primaryColor
            el.style.borderColor = primaryColor
          })
        } else if (binding.value === 'text') {
          // 文本按钮样式
          el.style.backgroundColor = 'transparent'
          el.style.borderColor = 'transparent'
          el.style.color = primaryColor
          
          // 鼠标悬停样式
          el.addEventListener('mouseenter', () => {
            el.style.color = `rgba(${primaryColorRgb}, 0.8)`
            el.style.backgroundColor = `rgba(${primaryColorRgb}, 0.1)`
          })
          
          // 鼠标离开样式
          el.addEventListener('mouseleave', () => {
            el.style.color = primaryColor
            el.style.backgroundColor = 'transparent'
          })
        }
      }
    }
  }
} 